<template>
  <div class="history-registration">
    <van-nav-bar title="发布历史" left-arrow @click-left="goBack" />
    <van-search v-model="searchKeyword" placeholder="输入姓名、物品名称搜索" @search="onSearch" />
    <van-list v-model:loading="loading" v-model:error="error" :finished="finished" @load="onLoad" :immediate-check="false"
      error-text="请求失败，点击重新加载" finished-text="没有更多了">
      <template #default>
        <!-- <van-cell v-for="item in list" :key="item.postId" title-class="cell-title" size="large" is-link border
          @click="viewDetail(item)" center>
          <template #title>
            <div class="title-container">
              <van-tag :type="item.postType === '0' ? 'primary' : 'success'" round>{{ item.postType === '0' ? '寻人' :
                '寻物' }}</van-tag>
              <van-tag :type="getTagType(item.postState)" plain>{{ getTagText(item.postState) }}</van-tag>
              <van-text-ellipsis :content="item.lostName" rows="2" />
            </div>
          </template>
          <template #label>
            <van-text-ellipsis :content="item.description" rows="3" />
          </template>
          <template #value>
            {{ item.lostDatetime }}
            <van-text-ellipsis :content="item.lostPlace" rows="2" />
          </template>
        </van-cell> -->
        <van-cell-group v-for="item in list" :key="item.postId" style="margin-top: 10px;" @click="viewDetail(item.postId)">
          <van-cell is-link>
            <template #title>
              <div class="title-container">
                <van-tag :type="item.postType === '0' ? 'primary' : 'success'" round>{{ item.postType === '0' ? '寻人' :
                  '寻物' }}</van-tag>
                <van-tag :type="getTagType(item.postState)" plain>{{ getTagText(item.postState) }}</van-tag>
                <van-text-ellipsis :content="item.lostName" rows="2" />
              </div>
            </template>
          </van-cell>
          <van-cell title="" size="large" clickable>
            <template #label>
              <van-text-ellipsis :content="item.description" rows="3" />
            </template>
            <template #value>
              {{ item.lostTime }}
              <van-text-ellipsis :content="item.lostPlace" rows="3" />
            </template>
          </van-cell>
        </van-cell-group>
      </template>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import { randomName, randomDate, randomElementFromArray, randomGeoAddress, randomPersonDescription, randomItemDescription, randomPhone } from '@/utils/random';
import { findPostList } from '@/api/findPost'

const router = useRouter();

const list = ref([]);
const searchKeyword = ref('');
const loading = ref(false);
const finished = ref(false);
const error = ref(false);
const pageNumer = ref(1);
const pageSize = ref(10);

const getTagType = (postState) => {
  switch (postState) {
    case '-2':
      return 'danger';
    case '-1':
      return 'danger';
    case '0':
      return 'warning';
    case '1':
      return 'primary';
    case '2':
      return 'success';
    default:
      return 'default';
  }
};

const getTagText = (postState) => {
  switch (postState) {
    case '-2':
      return '已取消';
    case '-1':
      return '未通过';
    case '0':
      return '审核中';
    case '1':
      return '广播中';
    case '2':
      return '已广播';
    default:
      return '未知状态';
  }
};

const goBack = () => {
  router.back(-1);
};

const onSearch = async () => {
  try {
    list.value = []
    pageNumer.value = 1;
    finished.value = false;
    loading.value = true;
    const res = await findPostList({ lostName: searchKeyword.value, pageNumer: pageNumer.value, pageSize: pageSize.value });
    list.value = res.data.records;
    // 判断是否还有更多数据
    finished.value = res.data.pages == pageNumer.value;
    if (!finished.value) {
      pageNumer.value++;
    }
  } catch (err) {
    console.error('搜索失败:', err);
    error.value = true;
  } finally {
    loading.value = false;
  }
};

const onLoad = async () => {
  loading.value = true;
  error.value = false;
  try {
    const res = await findPostList({ lostName: searchKeyword.value, pageNumer: pageNumer.value, pageSize: pageSize.value });
    list.value = list.value.concat(res.data.records);
    // 判断是否还有更多数据
    finished.value = res.data.pages <= pageNumer.value;
    if (!finished.value) {
      pageNumer.value++;
    }
  } catch (err) {
    console.error('加载更多失败:', err);
    error.value = true;
  } finally {
    loading.value = false;
  }
};

const viewDetail = (postId) => {
  router.push({
    path: '/findPost/detail',
    query: { postId: postId }
  });
};
onLoad()
</script>

<style scoped>
.history-registration {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
